Имплементация на React experimental_useFormStatus: Подобрено управление на състоянието на форми

Развиващата се среда на React непрекъснато въвежда инструменти и техники за подобряване на изживяването на разработчиците и производителността на приложенията. Една такава експериментална функция е hook-ът experimental_useFormStatus, предназначен да опрости управлението на състоянието на формите, особено при сървърни действия и сценарии за прогресивно подобрение. Това изчерпателно ръководство ще разгледа подробно hook-а experimental_useFormStatus, предоставяйки практически примери и прозрения за ефективното му използване.

Какво е experimental_useFormStatus?

Hook-ът experimental_useFormStatus е експериментален API, въведен от екипа на React, за да предостави по-лесен начин за проследяване на състоянието при изпращане на форма, особено при използване на сървърни действия. Преди този hook, управлението на различните състояния на формата (неактивна, изпращане, успех, грешка) често изискваше сложна логика за управление на състоянието. experimental_useFormStatus има за цел да абстрахира голяма част от тази сложност, като предоставя прост и ефективен начин за наблюдение и реакция на състоянията при изпращане на форма.

Ключови предимства:

• Опростено управление на състоянието: Намалява шаблонния код, необходим за управление на състоянията при изпращане на форма.
• Подобрено потребителско изживяване: Позволява по-отзивчиви актуализации на потребителския интерфейс въз основа на състоянието на формата.
• Подобрена четимост на кода: Прави кода, свързан с форми, по-лесен за разбиране и поддръжка.
• Безпроблемна интеграция със сървърни действия: Проектиран да работи особено добре с React Server Components и сървърни действия.

Основна имплементация

За да илюстрираме основната имплементация на experimental_useFormStatus, нека разгледаме прост пример с форма за контакт. Тази форма ще събира име, имейл и съобщение от потребителя и след това ще ги изпрати, използвайки сървърно действие.

Предпоставки

Преди да се потопите в кода, уверете се, че имате настроен React проект със следното:

• Версия на React, която поддържа експерименталните API-та (проверете документацията на React за необходимата версия).
• Активирани React Server Components (обикновено се използват в рамки като Next.js или Remix).

Пример: Проста форма за контакт

Ето един основен компонент за форма за контакт:

```jsx // app/actions.js (Сървърно действие) 'use server' export async function submitContactForm(formData) { // Симулиране на извикване на база данни или API заявка await new Promise(resolve => setTimeout(resolve, 2000)); const name = formData.get('name'); const email = formData.get('email'); const message = formData.get('message'); if (!name || !email || !message) { return { success: false, message: 'Всички полета са задължителни.' }; } try { // Заменете с реално извикване на API или операция с база данни console.log('Формата е изпратена:', { name, email, message }); return { success: true, message: 'Формата е изпратена успешно!' }; } catch (error) { console.error('Грешка при изпращане на формата:', error); return { success: false, message: 'Неуспешно изпращане на формата.' }; } } // app/components/ContactForm.jsx (Клиентски компонент) 'use client' import { experimental_useFormStatus as useFormStatus } from 'react' import { submitContactForm } from '../actions' function SubmitButton() { const { pending } = useFormStatus() return ( {pending ? 'Изпращане...' : 'Изпрати'} ) } export default function ContactForm() { return (

Име:

Имейл:

Съобщение: </div> <SubmitButton /> </form> ); } ``` <h3>Обяснение</h3> <ul> <li><b>Сървърно действие (<code>app/actions.js</code>):</b> Този файл дефинира функцията <code>submitContactForm</code>, която е сървърно действие. Тя симулира API заявка със забавяне от 2 секунди, за да демонстрира асинхронния характер на изпращането на формата. Също така обработва основна валидация и грешки.</li> <li><b>Клиентски компонент (<code>app/components/ContactForm.jsx</code>):</b> Този файл дефинира компонента <code>ContactForm</code>, който е клиентски компонент. Той импортира hook-а <code>experimental_useFormStatus</code> и действието <code>submitContactForm</code>.</li> <li><b>Използване на <code>useFormStatus</code>:</b> Вътре в компонента <code>SubmitButton</code> се извиква <code>useFormStatus</code>. Този hook предоставя информация за състоянието на изпращане на формата.</li> <li><b>Свойство <code>pending</code>:</b> Свойството <code>pending</code>, върнато от <code>useFormStatus</code>, показва дали формата се изпраща в момента. То се използва за деактивиране на бутона за изпращане и показване на съобщение „Изпращане...“.</li> <li><b>Свързване на формата:</b> Атрибутът <code>action</code> на елемента <code>form</code> е свързан със сървърното действие <code>submitContactForm</code>. Това казва на React да извика сървърното действие, когато формата бъде изпратена.</li> </ul> <h2>Разширена употреба и съображения</h2> <h3>Обработка на състояния на успех и грешка</h3> <p>Докато <code>experimental_useFormStatus</code> опростява проследяването на състоянието на изпращане, често се налага изрично да обработвате състоянията на успех и грешка. Сървърните действия могат да връщат данни, които показват успех или неуспех, които след това можете да използвате, за да актуализирате потребителския интерфейс.</p> <p><b>Пример:</b></p> ```jsx // app/components/ContactForm.jsx (Модифициран) 'use client' import { experimental_useFormStatus as useFormStatus } from 'react' import { submitContactForm } from '../actions' import { useState } from 'react'; function SubmitButton() { const { pending } = useFormStatus() return ( <button type="submit" disabled={pending}> {pending ? 'Изпращане...' : 'Изпрати'} </button> ) } export default function ContactForm() { const [message, setMessage] = useState(null); async function handleSubmit(formData) { const result = await submitContactForm(formData); setMessage(result); } return ( <div> <form action={handleSubmit}> <div> <label htmlFor="name">Име:</label> <input type="text" id="name" name="name" required /> </div> <div> <label htmlFor="email">Имейл:</label> <input type="email" id="email" name="email" required /> </div> <div> <label htmlFor="message">Съобщение:</label> <textarea id="message" name="message" required /> </div> <SubmitButton /> </form> {message && ( <p className={message.success ? 'success' : 'error'}> {message.message} </p> )} </div> ); } ``` <p><b>Обяснение:</b></p> <ul> <li><b>Състояние за съобщения:</b> Въвежда се променлива на състоянието <code>message</code>, за да се съхранява резултатът, върнат от сървърното действие.</li> <li><b>Обработка на резултата:</b> След като формата бъде изпратена, функцията <code>handleSubmit</code> актуализира състоянието <code>message</code> с резултата от сървърното действие.</li> <li><b>Показване на съобщения:</b> Компонентът показва съобщението въз основа на свойството <code>success</code> на резултата, като прилага различни CSS класове за състояния на успех и грешка.</li> </ul> <h3>Прогресивно подобрение</h3> <p><code>experimental_useFormStatus</code> се отличава в сценарии за прогресивно подобрение. Чрез прогресивно подобряване на стандартна HTML форма с React можете да осигурите по-добро потребителско изживяване, без да жертвате основната функционалност, ако JavaScript се провали.</p> <p><b>Пример:</b></p> <p>Започвайки с основна HTML форма:</p> ```html <!-- public/contact.html --> <form action="/submit-contact" method="post"> <div> <label for="name">Име:</label> <input type="text" id="name" name="name" required /> </div> <div> <label for="email">Имейл:</label> <input type="email" id="email" name="email" required /> </div> <div> <label for="message">Съобщение:</label> <textarea id="message" name="message" required>

Изпрати

```

След това можете прогресивно да я подобрите с React и experimental_useFormStatus.

```jsx // app/components/EnhancedContactForm.jsx 'use client' import { experimental_useFormStatus as useFormStatus } from 'react' import { submitContactForm } from '../actions' import { useState } from 'react'; import { useFormState } from 'react-dom'; function SubmitButton() { const { pending } = useFormStatus() return ( {pending ? 'Изпращане...' : 'Изпрати'} ) } export default function EnhancedContactForm() { const [message, setMessage] = useState(null); const [state, formAction] = useFormState(submitContactForm, null); // Използвайте null като начално състояние, ако не разчитате на него return (